<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>账号绑定</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <link rel="stylesheet" href="common/css/style.css">
    <script src="common/js/jquery-1.11.1.min.js"></script>
    <style>

    </style>
</head>
<body>
<!--通用顶部---begin-->
<div class="globalHeader">
    <a href="javascript:;"></a>
    <h3>账号绑定</h3>
</div>
<!--通用顶部---over-->
<!--账号绑定页面主体---begin-->
<div class="weui-cells weui-cells_form bindPhoneWrap">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">手机号</label>
        </div>
        <div class="weui-cell__bd">
            <input id="regPhone" class="weui-input" type="tel" placeholder="请输入手机号">
        </div>
    </div>
    <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
        </div>
        <div class="weui-cell__bd">
            <input id="regCode" class="weui-input" type="text">
        </div>
        <div class="weui-cell__ft">
            <button id="getCode" class="weui-vcode-btn">获取验证码</button>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确 定</a>
    </div>
</div>

<div class="weuiPopAlert" style="display: none;">       <!--消息提示层-->
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">消息提示</strong></div>
        <div class="weui-dialog__bd"></div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
        </div>
    </div>
</div>
<!--账号绑定页面主体---over-->
<!--通用底部---begin-->
<div class="weui-footer">
    <p class="weui-footer__text">Copyright &copy; 2017-2018 万营汇科技</p>
</div>
<!--通用底部---over-->
<script>
    $(function(){
        var reg = /^1[3|4|5|7|8][0-9]{9}$/;         //验证规则;
        var _errorTxt = $(".weuiPopAlert .weui-dialog .weui-dialog__bd");       //错误信息的内容

        $(".weuiPopAlert .weui-dialog .weui-dialog__ft").click(function () {
            $(".weuiPopAlert").hide();      //关闭提示层
        });

        $("#getCode").click(function () {
            if($(this).hasClass("disabled")){
                return;
            }
            var _phoneNum = $("#regPhone").val();       //获取手机号码
            if(reg.test(_phoneNum)==false){
                $("#regPhone").parent().parent().addClass("error");
                _errorTxt.text("您的手机号码有误!");
                $(".weuiPopAlert").show();
                return;
            }else{
                $("#regPhone").parent().parent().removeClass("error");
                $("#regPhone").attr("readonly","readonly");
                var setTime;
                var i=60;
                $(this).text("("+i+"s)").addClass("disabled");
                setTime = setInterval(function () {
                    i--;
                    $("#getCode").text("("+i+"s)");
                    if(i<=0){
                        clearInterval(setTime);
                        $("#getCode").text("获取验证码").removeClass("disabled");
                        return;
                    }
                },1000);
            }
            //获取手机动态验证码
        });

    });
</script>
<div class="append">
    <ul>
        <li class="item1"><span>abc1</span></li>
        <li class="item2"><span>abc2</span></li>
        <li class="item3"><span>abc3</span></li>
    </ul>
</div>
<div class="append">
    <ul>
        <li class="item1"><span>abc1</span></li>
        <li class="item2"><span>abc2</span></li>
        <li class="item3"><span>abc3</span></li>
    </ul>
</div>
<div class="append">
    <ul>
        <li class="item1"><span>abc1</span></li>
        <li class="item2"><span>abc2</span></li>
        <li class="item3"><span>abc3</span></li>
    </ul>
</div>
</body>
</html>